<template>
  <div class="page-container">
    <div class="page-tool-bar">
      <div class="page-tool-container bid-flex">
        <curLocation />
        <div>
          <div class="searh-panel">
            <span class="input-span"
              ><input class="bid-s-input" type="text" name=""
            /></span>
            <span class="s-btn">搜索</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bid-notice-container bid-flex">
      <div class="nav-side">
        <p>资格预审公告</p>
        <p class="active">招标公告</p>
        <p>中标公告</p>
      </div>
      <div class="notice-list-wrap">
        <div>
          <div class="tab-header bid-flex">
            <div class="left-col">招标公告</div>
            <div class="right-col bid-flex">
              <p>所属地区</p>
              <p>来源渠道</p>
              <p>公告发布时间</p>
            </div>
          </div>
          <div class="notice-item-wrap">
            <div class="notice-item bid-flex" v-for="item in 8" :key="item">
              <div class="left-col n-item-title">{{ noticeTitle }}</div>
              <div class="right-col bid-flex">
                <div class="r-col-item"><p>发布工具</p></div>
                <div class="r-col-item"><p>公共资源</p></div>
                <div class="r-col-item"><p>2021-06-05</p></div>
              </div>
            </div>
          </div>
        </div>
        <div class="pagination-wrap">
          <p>上一页</p>
          <p>1</p>
          <p class="active">2</p>
          <p>3</p>
          <p>4</p>
          <p>5</p>
          <p>下一页</p>
          <p>前往 页</p>
          <p>尾页</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import curLocation from "../components/current-location.vue";
export default {
  name: "bid-notice",
  components: {
    curLocation
  },
  data() {
    return {
      noticeTitle:
        "招投标标题招投标标题招投标标题招投标标题招投标标题招投标标题"
    };
  },
  methods: {}
};
</script>
<style scoped>
.page-tool-container {
  margin: 0.2rem 0;
  justify-content: space-between;
}

.searh-panel {
  height: 0.35rem;
  border: 0.01rem solid #dcdfe6;
  box-sizing: border-box;
}

.input-span {
  display: inline-block;
}

.bid-s-input {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  /* border: 0.01rem solid #dcdfe6; */
  border: none;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 0.32rem;
  line-height: 0.32rem;
  outline: none;
  padding: 0 0.02rem;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 2.25rem;
}

.bid-s-input:focus {
  outline: none;
  border-color: #409eff;
}

.s-btn {
  display: inline-block;
  vertical-align: top;
  width: 0.5rem;
  height: 0.32rem;
  padding-left: 0.4rem;
  color: #fff;
  line-height: 0.32rem;
  font-size: 0.14rem;
  background-repeat: no-repeat;
  background-size: 0.2rem;
  background-position: 0.1rem 0.06rem;
  background-image: url("../assets/icon/search_bid_news.png");
  background-color: #1571ba;
  outline: 0.01rem solid #1571ba;
}

.nav-side {
  width: 1.56rem;
  overflow: hidden;
}

.nav-side p {
  display: inline-block;
  width: inherit;
  height: 0.52rem;
  text-align: center;
  line-height: 0.52rem;
  font-size: 0.16rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: #fff;
  border: 0.01rem solid #ddd;
  box-sizing: border-box;
}

.nav-side p.active {
  color: #fff;
  border-color: #1571ba;
  background-color: #1571ba;
}

.notice-list-wrap {
  margin-left: 0.2rem;
  flex: 2;
}

.tab-header {
  height: 0.4rem;
  justify-content: space-between;
  line-height: 0.4rem;
  font-size: 0.14rem;
  color: #666;
  border: 0.005rem solid #ddd;
  border-bottom: none;
  background: rgba(0, 0, 0, 0.05);
}

.notice-item {
  padding: 0.15rem 0.1rem 0.15rem 0;
  font-size: 0.16rem;
  justify-content: space-between;
  border: 0.005rem solid #ddd;
  border-top: none;
}

.left-col {
  width: 4.56rem;
  padding-left: 0.1rem;
}

.n-item-title {
  line-height: 0.25rem;
}

.right-col {
  width: 4.3rem;
  justify-content: space-evenly;
}

.r-col-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pagination-wrap {
  margin-top: 0.5rem;
  text-align: center;
}

.pagination-wrap p {
  display: inline-block;
  padding: 0.1rem 0.15rem;
  font-size: 0.14rem;
  color: #666;
  background-color: #f9f9f9;
  border: 0.01rem solid #e4e4e4;
  border-radius: 0.03rem;
}

.pagination-wrap p.active {
  color: #fff;
  background-color: #1571ba;
}
</style>
